/**
* @file index.vue.vue
* @author huang
* @date 2023/8/17
* @description 数据字典
* @projectName
* @email newflyhuang@gmail.com
*/

<template>

  <pure-table
    ref="pureTable"
    :hide-index="true"
    :list-api="listApi"
    :query-condition="queryCondition"
    selection
    @selection-change="handleSelectionChange"
  >
    <template #header>
      <query-panel @query="onQuery" @reset="onReset">
        <el-form-item>
          <el-input v-model="queryData.dictName" placeholder="ID/名称/编码" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="queryData.dictType" placeholder="字典类型" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryData.status" placeholder="状态">
            <el-option label="正常" value="0" />
            <el-option label="停用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="queryData.createTime"
            format="yyyy-MM-dd HH:mm"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm"
          />
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryData.dictLevel" placeholder="层级">
            <el-option :value="0" label="单层" />
            <el-option :value="1" label="多层" />
          </el-select>

        </el-form-item>
        <template #extra>
          <pure-button icon="add" label="新增" @click="onAdd" />
          <pure-button :disabled="multiple" icon="delete" label="删除" @click="handleDelete" />
          <pure-button icon="reset" label="刷新缓存" @click="handleRefreshCache" />
        </template>
        <template #rightExtra>
          <el-radio-group v-model="type" @change="changeRadio">
            <el-radio-button :label="0">
              系统级
            </el-radio-button>
            <el-radio-button :label="1">
              用户级
            </el-radio-button>
          </el-radio-group>
        </template>
      </query-panel>

    </template>

    <el-table-column label="ID" prop="dictId" />
    <el-table-column label="名称" prop="dictName" />
    <el-table-column label="字典类型" prop="">
      <template #default="{row}">
        <router-link :to="{name:'dicData', params:{dictId:row.dictId}}" class="link-type">
          <span>{{ row.dictType }}</span>
        </router-link>
      </template>
    </el-table-column>
    <el-table-column label="状态" prop="status">
      <template #default="{row}">
        <pure-type-text :config="DICT_STATUS" :type="row.status" />
      </template>
    </el-table-column>
    <el-table-column label="备注" prop="remark" />
    <el-table-column label="创建时间" prop="createTime" />
    <el-table-column label="层级" prop="dictLevel">
      <template #default="{row}">
        <!--        0单层,1多层-->
        {{ row.dictLevel === 0 ? '单层' : '多层' }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{row}">
        <pure-button size="small" type="text" label="编辑" @click="onEdit(row)" />
        <pure-button size="small" type="text" label="删除" @click="handleDelete(row)" />
      </template>
    </el-table-column>

  </pure-table>

</template>

<script>
import QueryPanel from '@/common/components/query/queryPanel.vue';
import SystemDataDictionaryApi from './api';
import NewDicDialog from './dialog/newDic.vue';
import { DICT_STATUS, } from './config';

export default {
  components: { QueryPanel, },
  data() {
    return {
      listApi: SystemDataDictionaryApi.getDictionaryList,
      DICT_STATUS,
      multiple: true,
      ids: [],
      type: 0,
      visible: false,
      drawerVisible: false,
      row: null,
      queryCondition: {
        dictBelong: 0,
      },
      queryData: {
        dictName: '',
        dictType: '',
        dictLevel: '',
        dictBelong: 0,
        status: '',
        createTime: '',
      },
    };
  },
  methods: {
    onQuery() {
      this.queryCondition = {
        ...this.queryData,
      };
    },
    onReset() {
      this.queryData = {
        dictName: '',
        dictType: '',
        dictLevel: '',
        dictBelong: 0,
        status: '',
        createTime: '',
      };
      this.queryCondition = {
        ...this.queryData,
      };
    },
    // 新增按钮操作
    onAdd() {
      this.$dialog({
        component: () => <NewDicDialog onDone={this.onDone} />,
      });
    },
    // 新增完成后刷新列表
    onDone() {
      this.$refs.pureTable.fetchData();
    },
    // 编辑按钮操作
    onEdit(row) {
      this.$dialog({
        component: () => <NewDicDialog data={row} title={'修改字典类型'} onDone={this.onDone} />,
      });
    },

    changeRadio(val) {
      this.queryCondition.dictBelong = val;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const dictIds = row.dictId || this.ids;
      this.$confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(async () => {
        await SystemDataDictionaryApi.deleteDictionary(dictIds);
        this.$message.success('删除成功');
        this.onDone();
      }).catch(() => {
      });
    },

    /** 刷新缓存按钮操作 */
    async handleRefreshCache() {
      await SystemDataDictionaryApi.refreshDictionary();
      this.$refs.pureTable.fetchData();
      this.$message.success('刷新成功');
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.dictId);
      // this.single = selection.length!=1
      this.multiple = !selection.length;
    },
  },

};
</script>

<style lang="scss" scoped>
@import "~@/common/styles/theme/handle.scss";

.link-type{
  @include font_color_imp('color-primary');
}
</style>
